<template>
  <div>
    <template v-if="data.name==='productPicture'">
      <img :src="qrcodeSetImage1">
    </template>
    <template v-else-if="data.name==='productIntroduction'">
      <img :src="qrcodeSetImage2">
    </template>
    <template v-else-if="data.name==='selfService'">
      <p class="tem-name" v-if="!data.nowShowTitle">{{(data.displayNameLanguage && data.displayNameLanguage[i18n.locale]) || data.title}}</p>
      <ul class="tem-service">
        <li v-for="(item,index) in eventList" :key="item">
          <img :src="getSrc(index)">
          <p>{{getEventName(item)}}</p>
        </li>
        <li v-for="(item,index) in otherLinkList" :key="item.templateBizId">
          <img v-if="item.iconUrl" :src="item.iconUrl" class="paas-icon" />
          <div v-else class="paas-icon" :style="{ background: item.color }">
            <i :class="['iconfont', item.icon]"/>
          </div>
          <p>{{item.applicationName}}</p>
        </li>
        <li v-if="showMore">
          <img :src="qrcodeSetImage3">
          <p>{{$t('common.base.more')}}</p>
        </li>
      </ul>
    </template>
    <template v-else-if="data.name==='productInformation'">
      <p class="tem-name" v-if="!data.nowShowTitle">{{(data.displayNameLanguage && data.displayNameLanguage[i18n.locale]) || data.title}}</p>
      <ul class="tem-info">
        <li v-for="(item,index) in showFields" :key="index">
          <span class="info-left">{{getKey(item)}}</span>
        </li>
      </ul>
    </template>
    <template v-else-if="data.name==='productVideo'">
      <img :src="qrcodeSetImage4">
    </template>
    <template v-else-if="data.name==='productInstructions'">
      <img :src="qrcodeSetImage2">
    </template>
    <template v-else-if="data.name==='onlineService'">
      <img class="service" :src="qrcodeSetImage5">
    </template>
    <template v-else-if="data.name==='companyInfo'">
      <img :src="qrcodeSetImage6">
    </template>
  </div>
</template>

<script>
import i18n from '@src/locales'
import { getOssUrl, getLocalesOssUrl } from '@src/util/assets'
const imgSrc0 = getOssUrl('/service/icon0.png')
const imgSrc1 = getOssUrl('/service/icon1.png')
const imgSrc2 = getOssUrl('/service/icon2.png')
const imgSrc3 = getOssUrl('/service/icon3.png')
const imgSrc4 = getOssUrl('/service/icon4.png')
const qrcodeSetImage1 = getLocalesOssUrl('/bannerDemo.png')
const qrcodeSetImage2 = getLocalesOssUrl('/IntroductionDemo.png')
const qrcodeSetImage3 = getOssUrl('/service/moreService.png')
const qrcodeSetImage4 = getLocalesOssUrl('/videoDemo.png')
const qrcodeSetImage5 = getLocalesOssUrl('/serviceDemo.png')
const qrcodeSetImage6 = getLocalesOssUrl('/companyInfoDemo.png')

export default {
  name:'tem-component',
  data(){
    return{
      qrcodeSetImage1,
      qrcodeSetImage2,
      qrcodeSetImage3,
      qrcodeSetImage4,
      qrcodeSetImage5,
      qrcodeSetImage6,
      eventList:[],
      showMore:false,
      imgSrc0,
      imgSrc1,
      imgSrc2,
      imgSrc3,
      imgSrc4,
      i18n,
      otherLinkList: [],
    }
  },
  props:{
    data:{
      type:Object,
      default:()=>{}
    },
    doorEventType:{
      type:Array,
      default:()=>[]
    },
    showFields:{
      type:Array,
      default:()=>[]
    },
    allEventList:{
      type:Array,
      default:()=>[]
    },
    // 绑定的pass流程+自定义链接
    paasList: {
      type:Array,
      default:()=>[]
    }
  },
  mounted(){
    const doorEventType_ = Object.assign([], this.doorEventType);
    if (this.data.progressQuery) {
      doorEventType_.push('progressQuery');
    }
    if (this.data.enterpriseMall) {
      doorEventType_.push('enterpriseMall');
    }
    if(doorEventType_){
      if(doorEventType_.length + (this.paasList?.length ?? 0) > 4){
        // 事件先取0-3个，如果事件的数量小于3个，则otherLinkList再获取一下
        this.eventList= doorEventType_.filter((item,index)=>index<3);
        this.otherLinkList = this.paasList?.filter((item,index)=>(index+this.eventList.length)<3) ?? [];
        this.showMore=true;
      }else{
        this.eventList=[...doorEventType_];
        this.otherLinkList = this.paasList ?? [];
      }
    }
  },
  methods:{
    // 获取基本信息字段名
    getKey(item){
      const keys=Object.keys(item);
      // 接口的返回很神奇，把其他字段全排除才能去取一个自定义的字段名，兼容性极差。。
      const key=keys.find(key => !['isSystem', 'formType', 'setting'].includes(key));
      return item[key];
    },
    getEventName(id){
      const allEventList_ = Object.assign([], this.allEventList);
      if (this.data.progressQuery) allEventList_.push({ name: this.$t('product.setting.qrCodeSet.temComponent.name1'), id: 'progressQuery' });
      if (this.data.enterpriseMall) allEventList_.push({ name: this.$t('product.setting.qrCodeSet.temComponent.name2'), id: 'enterpriseMall' });
      const event= allEventList_.find(item=>item.id===id);
      return event?event.name:''
    },
    getSrc(index){
      let key = `imgSrc${index % 5}`;
      try {
        if(this[key]){
          return this[key]
        }
        console.warn('not import icon getSrc');
        return ''
      } catch (error) {
        console.warn(error, 'error try catch getSrc');
      }
      
      
    }
  }
}
</script>

<style lang="scss" scoped>
.service{
  width: 56px;
  height: 56px;
  position: absolute;
  top: 260px;
  right: 0;
  z-index: 1;
}
.tem-name{
  margin-bottom:0;
  font-size:12px;
  font-weight:bold;
  background:white;
  padding: 8px 0 4px 5px;
}
.tem-service{
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  padding: 5px;
  background: white;
  li{
    width: 23%;
    margin-right: 2%;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    text-align: center;
    padding-top: 7px;
    border-radius: 5px;
    height: 58px;
    img{
      width: 65%;
      height: auto;
    }
    p{
      font-size: 8px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      margin-top: 4px;
      transform: scale(.8);
    }

    .paas-icon {
      border-radius: 8px;
      width:27.72px;
      height: 27.72px;
      line-height: 27.72px;
      margin: auto;
      margin-bottom: 5px;
      .iconfont {
        color:#fff;
        font-size: 14px;
      }
    }
  }
}
.tem-info{
  background: white;
  padding-left: 0;
  font-size: 12px;
  li{
    color: $text-color-secondary;
    padding: 0 5px;
    overflow: hidden;
    span{
      transform: scale(.8);
      transform-origin: 0 0;
    }
    .info-left{
      float: left;
    }
    .info-right{
      color: $text-color-primary;
      float: right;
    }
  }
}
</style>